<template>
  <el-dialog title="筛选模板消息目标用户" :close-on-click-modal="false" :visible.sync="visible">
    <el-form ref="dataForm" :inline="true" :model="dataForm" clearable @keyup.enter.native="getWxUsers()">
      <el-form-item>
        <el-select v-model="dataForm.tagid" filterable placeholder="用户标签" @change="getWxUsers()">
          <el-option v-for="item in wxUserTags" :key="item.id" :label="item.name" :value="item.id+''" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.nickname" placeholder="昵称" clearable @change="getWxUsers()" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.province" placeholder="省份" clearable @change="getWxUsers()" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.city" placeholder="城市" clearable @change="getWxUsers()" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.remark" placeholder="备注" clearable @change="getWxUsers()" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.qrScene" placeholder="扫码场景值" clearable @change="getWxUsers()" />
      </el-form-item>
    </el-form>
    <div class="text-bold">本消息将发送给：</div>
    <div v-loading="wxUsersLoading" class="user-list">
      <div v-for="item in wxUserList" :key="item.openid" class="user-card">
        <el-avatar :src="item.headimgurl" />
        <div class="nickname">{{ item.nickname }}</div>
      </div>
      <div class="text-bold">
        <span v-show="totalCount>10">...</span>
        等共<span class="text-success">{{ totalCount }}</span>个用户
      </div>
    </div>
    <div class="margin-top text-bold">消息预览：</div>
    <div class="margin-top-xs">
      <el-input v-model="msgReview" type="textarea" disabled autosize placeholder="模版" />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" :disabled="totalCount<=0 || sending" @click="send">{{ sending?'发送中...':'发送' }}</el-button>
      <el-button @click="visible=false">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { mapState } from 'vuex'
import { getFansTags } from '../api/wx_fans_tag'
export default {
  name: 'TemplateMsgTask',
  props: {
    wxUserTagName: {
      type: String,
      default: '',
      required: false
    }
  },
  data() {
    return {
      visible: false,
      wxUsersLoading: false,
      sending: false,
      msgTemplate: {},
      dataForm: {
        page: 1,
        sidx: 'subscribe_time',
        order: 'desc',
        tagid: '',
        nickname: '',
        city: '',
        province: '',
        remark: '',
        qrScene: ''
      },
      wxUserList: [],
      totalCount: 0,
      wxUserTags: []
    }
  },
  computed: mapState({
    msgReview() {
      if (!this.msgTemplate.data) return ''
      let content = this.msgTemplate.content
      this.msgTemplate.data.forEach(item => {
        content = content.replace('{{' + item.name + '.DATA}}', item.value)
      })
      return content
    }
  }),
  mounted() {
    this.getWxUserTags().then((taglist) => {
      if (this.wxUserTagName) {
        const tagItem = taglist.find(tag => tag.name === this.wxUserTagName)
        console.log(tagItem)
        if (tagItem) {
          this.dataForm.tagid = tagItem.id + ''
        }
      }
      this.getWxUsers()
    })
  },
  created() {
    this.FansTags()
  },
  methods: {
    // 获取标签
    FansTags() {
      getFansTags().then(({ data }) => {
        this.wxUserTags = data
        this.$forceUpdate()
      })
    },
    init(msgTemplate) {
      if (!msgTemplate || !msgTemplate.templateId) {
        this.$message.error('消息模板无效')
        return
      }
      if (!msgTemplate.data || !(msgTemplate.data instanceof Array)) {
        this.$message.error('请现配置此模板填充数据')
        return
      }
      this.msgTemplate = msgTemplate
      this.visible = true
    },
    getWxUserTags() {
      return new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl('/manage/wxUserTags/list'),
          method: 'get'
        }).then(({ data }) => {
          if (data && data.code === 200) {
            this.$store.commit('wxUserTags/updateTags', data.list)
            resolve(data.list)
          } else {
            this.$message.error(data.msg)
            reject(data.msg)
          }
        }).catch(err => reject(err))
      })
    },
    getWxUsers() {
      this.wxUsersLoading = true
      this.$http({
        url: this.$http.adornUrl('/manage/wxUser/list'),
        method: 'get',
        params: this.$http.adornParams(this.dataForm)
      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.wxUserList = data.page.list
          this.totalCount = data.page.totalCount
        } else {
          this.$message.error(data.msg)
        }
        this.wxUsersLoading = false
      })
    },
    send() {
      if (this.sending) return
      this.sending = true
      this.$http({
        url: this.$http.adornUrl('/manage/msgTemplate/sendMsgBatch'),
        method: 'post',
        data: this.$http.adornData({
          wxUserFilterParams: this.dataForm,
          templateId: this.msgTemplate.templateId,
          url: this.msgTemplate.url,
          miniprogram: this.msgTemplate.miniprogram,
          data: this.msgTemplate.data
        })
      }).then(({ data }) => {
        this.sending = false
        if (data && data.code === 200) {
          this.$message.success('消息将在后台发送')
          this.visible = false
        } else {
          this.$message.error(data.msg)
        }
      })
    }
  }
}
</script>
<style scoped>
.user-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.user-card{
    overflow: hidden;
    max-width: 60px;
    margin: 5px;
    text-align: center;
}
.nickname{
    color: #999999;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
</style>
